<style>
	
</style>
<template>
    <div>
        <header class="admin-container-header clearfix">
            <div class="header-group">
                <h4 class="title">
                    <Button type="text" size='small' @click='$router.back()'><Icon type="ios-arrow-back" size='20' style='margin-top: -6px;' /></Button>模型管理
                </h4>
                <h5 class="sub-title">【{{itemInfo.title}}】字段列表</h5>
            </div>
            <div class="float-right">
                <button type="button" class="float-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='addItemStatus'>
                    <span><Icon type="plus-round"></Icon> 添加字段</span>
                </button>
            </div>
        </header>
        <main class="admin-container-body" style="height: calc(100% - 50px)">
            <section class="panel-box">
            <section class="panel-box-body">
                
                <section class="diy-table-list" v-cloak>
                    <div class="diy-table-item diy-table-item-header">
                        <div class="list-unstyled row">
                            <div class="col-md-2">标题</div>
                            <div class="col-md-2">字段名</div>
                            <div class="col-md-2">字段格式</div>
                            <div class="col-md-2">操作</div>
                        </div>
                    </div>
                    <div v-if='itemList.length' class="diy-table-body">
                        <div class="diy-table-item" v-for='(item,index) in itemList' >
                            <div class="list-unstyled row">
                                <div class="col-md-2 text-999"><span>{{item.title}}</span></div>
                                <div class="col-md-2 text-999"><span>{{item.field}}</span></div>
                                <div class="col-md-2 text-999"><span>{{item.styleText}}</span></div>
                                <div class="col-md-2">
                                    <i-button type="button" class="ivu-btn ivu-btn-error ivu-btn-small"  @click='itemDel(item)'>删除</i-button>
                                    <i-button type="button" class="ivu-btn ivu-btn-small" @click='dialogItemEdit(item)'>修改</i-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="no-block" v-else style="height: calc(100% - 50px)">
                        <Icon type="ios-filing-outline"></Icon>
                        <p>暂无数据</p>
                    </div>
                </section>
                   
            </section>
        </section>
    </main>
    <Modal :title="dialogTitle" v-model="dialog" size="small" v-cloak>
        <i-form :model="item" :rules="item.rules" ref="item" :label-width="80">
            <Form-Item label="字段描述" prop="title">
                <i-input v-model="item.title" placeholder="例：下载地址"></i-input>
            </Form-Item>
            <Form-Item label="字段名称" prop="field">
                <i-input v-model="item.field" placeholder="例:down_url" :disabled='currentStatus == "edit"'><div slot="prepend">diy_</div></i-input>
            </Form-Item>
            <Form-Item label="新字段名称" prop="field" v-if='currentStatus == "edit"'>
                <i-input v-model="item.fieldNewName" placeholder="请输入修改后的字段名称"><div slot="prepend">diy_</div></i-input>
            </Form-Item>
            <Form-Item label="字段格式">
                <i-select v-model="style" placeholder="请选择">
                    <i-option v-for="item in inputList" :label="item.value" :value="item.key"></i-option>
                </i-select>
            </Form-Item>
            <Form-Item v-if='style == "radio"' label="数据" prop="field">
                <i-input v-model="data" type="textarea" placeholder="是\n否"></i-input>
            </Form-Item>
            <Form-Item v-if='style == "select" || style == "checkbox"' label="选择数据" prop="field">
                <i-input v-model="data" type="textarea" :rows='3' placeholder="黑色\n白色\n灰色"></i-input>
            </Form-Item>
        </i-form>
        <div slot="footer" class="dialog-footer" v-cloak>
            <i-button @click="dialog = false">取 消</i-button>
            <i-button type="primary" @click="itemSave()">确 定</i-button>
        </div>
    </Modal>
    </div>
</template>

<script>
export default {
    data () {
       return {
            itemList: [],
            dialog: false,
            dialogTitle: '添加字段',
            itemInfo: '',
            modeName: '',
            currentStatus: '',
            item:{
                id: '',
                title: '',
                field: '',
                fieldNewName: '',
            },
            style: 'input',
            inputList: [],
            allList: [
                {key:'input', value:'单行文本（input）'},
                {key:'textarea', value:'多行文本（textarea）'},
                {key:'edit', value:'编辑器（edit）'},
                {key:'select', value:'选择器（select）'},
                {key:'upload', value:'上传组件（upload）'},
                {key:'radio', value:'单选框（radio）'},
//              {key:'checkbox', value:'多选框（checkbox）'},
                {key:'date', value:'日期（date）'},
                {key:'int', value:'整数（int）'},
                {key:'decimal', value:'小数（decimal）'},
            ],
            varcharList: [
                {key:'input', value:'单行文本（input）'},
                {key:'select', value:'选择器（select）'},
                {key:'upload', value:'上传组件（upload）'},
                {key:'radio', value:'单选框（radio）'},
//              {key:'checkbox', value:'多选框（checkbox）'},
                {key:'date', value:'日期（date）'},
            ],
            longtextList: [
                {key:'textarea', value:'多行文本（textarea）'},
                {key:'edit', value:'编辑器（edit）'},
            ],
            intList: [
                {key:'int', value:'整数（int）'},
            ],
            decimalList: [
                {key:'decimal', value:'小数（decimal）'},
            ],
            
            data: '',
       }
    },
    watch: {
        
    },
    mounted: function() {
        this.modelName = this.$route.params.id;
        this.getItemInfo(this.$route.params.id);
    },
    methods: {
        getItemInfo: function() {
            this.$ssy.ajax('{$domain}/article/ApiAdminArticleModel/itemInfo', {
                modelName: this.modelName,
            }).then(res => {
                if (res.code == 1) {
                    this.itemInfo = res.data;
                    this.getItemList();
                }
            });
        },
        getItemList: function() {
            this.$ssy.ajax('{$domain}/article/ApiAdminArticleField/itemList', {
                modelName: this.modelName,
            }).then(res => {
                if (res.code == 1) {
                    var itemList = res.data;
                    if (itemList) {
                    	for (var i = 0; i < itemList.length; i++) {
                    		itemList[i]['field'] = itemList[i]['field'].replace('diy_',"");
                    		if (itemList[i]['style'] == 'input') {
                    			itemList[i]['styleText'] = '单行文本（input）';
                    		}
                    		if (itemList[i]['style'] == 'textarea') {
                    			itemList[i]['styleText'] = '多行文本（textarea）';
                    		}
                    		if (itemList[i]['style'] == 'edit') {
                    			itemList[i]['styleText'] = '编辑器（edit）';
                    		}
                    		if (itemList[i]['style'] == 'select') {
                    			itemList[i]['styleText'] = '选择器（select）';
                    		}
                    		if (itemList[i]['style'] == 'upload') {
                    			itemList[i]['styleText'] = '上传组件（upload）';
                    		}
                    		if (itemList[i]['style'] == 'radio') {
                    			itemList[i]['styleText'] = '单选框（radio）';
                    		}
                    		if (itemList[i]['style'] == 'checkbox') {
                    			itemList[i]['styleText'] = '多选框（checkbox）';
                    		}
                    		if (itemList[i]['style'] == 'date') {
                    			itemList[i]['styleText'] = '日期（date）';
                    		}
                    		if (itemList[i]['style'] == 'int') {
                    			itemList[i]['styleText'] = '整数（int）';
                    		}
                    		if (itemList[i]['style'] == 'decimal') {
                    			itemList[i]['styleText'] = '小数（decimal）';
                    		}
                    	}
                    }
                    this.itemList = itemList;
                }
            });
        },
        itemDel: function(item) {
            this.$Modal.confirm({
                title: '消息提示',
                content: '<p>确定删除么？删除后不可恢复</p>',
                onOk: () => {
                    this.$ssy.ajax('{$domain}/article/ApiAdminArticleField/itemDel', {
                        id: item.id,
                        modelName: this.modelName,
                    }).then(res => {
                            if (res.code == 1) {
                            this.$Message.success('删除成功');
                            this.getItemList();
                        }
                    });
                },
                onCancel: () => {
                }
            });
        },
        addItemStatus: function() {
            this.dialogTitle = '添加字段';
            this.dialog = true;
            this.item.id = '';
            this.item.title = '';
            this.item.field = '';
            this.data = '';
            this.style = 'input';
            this.item.fieldNewName = '';
            this.item.fieldOldType = '';
            this.currentStatus = '';
            this.inputList = this.allList;
        },
        dialogItemEdit: function(item) {
            this.dialogTitle = '修改字段';
        	var style = item.style;
            
            if (style == 'input' || style == 'upload' || style == 'radio' || style == 'checkbox' || style == 'select' || style == 'date') {
            	this.inputList = this.varcharList;
	        }
            if (style == 'textarea' || style == 'edit') {
            	this.inputList = this.longtextList;
	        }
	        if (style == 'int') {
	        	this.inputList = this.intList;
	        }
	        if (style == 'decimal') {
	        	this.inputList = this.decimalList;
	        }
	        this.style = style;
            this.dialog = true;
            this.item.id = item.id;
            this.item.title = item.title;
            this.item.field = item.field;
            this.item.fieldNewName = item.field;
            this.item.fieldOldType = item.type;
            this.currentStatus = 'edit';
            this.data = item.data.join(',');
        },
        
        itemSave: function() {
            if (!this.item.title) {
                this.$Message.error('名称不能为空');
                return false;
            }
            if (!this.item.field) {
                this.$Message.error('字段不能为空');
                return false;
            }
            
            var parent = /^[a-zA-Z0-9_-]+$/;
            if (!parent.test(this.item.field)) {
                this.$Message.error('字段输入值不支持');
                return false;
            }
            
            if (this.data) {
                var data = this.data.replace(/\n/g,',');
            }
            this.item.fieldNewName = this.item.fieldNewName.trim();
            this.item.field = this.item.field.trim();
            if (this.item.id) {
                this.$ssy.ajax('{$domain}/article/ApiAdminArticleField/itemNameEdit', {
                    id: this.item.id,
                    title: this.item.title,
                    modelName: this.modelName,
                	field: this.item.field,
                	fieldNewName: this.item.fieldNewName,
                    style: this.style,
                    data: data,
                }).then(res => {
                    if (res.code == 1) {
                        this.$Message.success(res.msg);
                        this.getItemList();
                        this.dialog = false;
                    }
                });
            } else {
                this.$ssy.ajax('{$domain}/article/ApiAdminArticleField/itemAdd', {
                    title: this.item.title,
                	field: this.item.field,
                	fieldNewName: this.item.fieldNewName,
                    modelName: this.modelName,
                    style: this.style,
                    data: data,
                }).then(res => {
                    if (res.code == 1) {
                        this.$Message.success(res.msg);
                        this.getItemList();
                        this.dialog = false;
                    }
                });
            }
        },
        
    }
}
</script>
